<template>

   <el-table :data="tableData" @expand-change="expandColumn" row-key="name" :expand-row-keys="expands"
      style="width: 100%">
      <el-table-column type="expand">
         <template #default="props">
            <div m="4">
               <p m="t-0 b-2">State: {{ props.row.state }}</p>
               <p m="t-0 b-2">City: {{ props.row.city }}</p>
               <p m="t-0 b-2">Address: {{ props.row.address }}</p>
               <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
               <h3>Family</h3>
               <el-table :data="props.row.family">
                  <el-table-column label="Name" prop="name" />
                  <el-table-column label="State" prop="state" />
                  <el-table-column label="City" prop="city" />
                  <el-table-column label="Address" prop="address" />
                  <el-table-column label="Zip" prop="zip" />
               </el-table>
            </div>
         </template>
      </el-table-column>
      <el-table-column label="Date" prop="date" />
      <el-table-column label="Name" prop="name" />
   </el-table>
</template>

<script setup>
import { ref } from 'vue'
const expands = ref([])
const tableData = [
   {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
         {
            name: 'Jerry',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Spike',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Tyke',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
      ],
   },
   {
      date: '2016-05-02',
      name: 'Tom1',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
         {
            name: 'Jerry',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Spike',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Tyke',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
      ],
   },
   {
      date: '2016-05-04',
      name: 'Tom2',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
         {
            name: 'Jerry',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Spike',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Tyke',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
      ],
   },
   {
      date: '2016-05-01',
      name: 'Tom3',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
         {
            name: 'Jerry',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Spike',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Tyke',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
      ],
   },
   {
      date: '2016-05-08',
      name: 'Tom4',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
         {
            name: 'Jerry',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Spike',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Tyke',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
      ],
   },
   {
      date: '2016-05-06',
      name: 'Tom5',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
         {
            name: 'Jerry',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Spike',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Tyke',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
      ],
   },
   {
      date: '2016-05-07',
      name: 'Tom6',
      state: 'California',
      city: 'San Francisco',
      address: '3650 21st St, San Francisco',
      zip: 'CA 94114',
      family: [
         {
            name: 'Jerry',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Spike',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
         {
            name: 'Tyke',
            state: 'California',
            city: 'San Francisco',
            address: '3650 21st St, San Francisco',
            zip: 'CA 94114',
         },
      ],
   },
]

let expandColumn = (row, expandedRows) => {
   console.log(row, expandedRows);
   //row 被点击当前行的数据
   //expandedRows 存放页面中被展开行的数据 对应的数组就是 expand-row-keys

   //通过expandedRows长度来判断用户点击是展开还是折叠

   if (expandedRows.length) {
      //展开
      expands.value = []; //先干掉之前展开的行
      if (row) {
         expands.value.push(row.name); //push新的行 (原理有点类似防抖)
      }
   } else {
      expands.value = []; //折叠 就清空expand-row-keys对应的数组
   }
};

let getRowKeys = (row) => {
   //row是当前行的数据
   //给每行绑定唯一的标识
   return row.name;
};
// 投递简历
// 创业公司能不能投 
// 公司一直干着的好 
// 只有什么样不能选: 画饼 让你技术入股.2000  3000  发你虚拟币.公司自己发布.公司创业赢了.虚拟币兑换人民币
// 那你最低能接受.虚拟币和工资的比例是多少   15000   80%工资 20%虚拟币   我可以当我找的工作是个12000
// 可以创业:
// 只要能算到眼前的钱就行  
// 短期的也需要约着面试 3个月

// 有短期的(工资会高一点.基本不卡学历年龄) 有长期的(选这个) 


// 每个月你能有多少钱(到你银行卡的.)   期权  分红 14薪  15*14 21W   16*12 19.2
// 年底4 五月 (很多人受够了公司制度.管理.压力想辞职) 5月辞职  3个月(当前公司.四分之一)   新的公司14薪
// 15*14
// 10月入职
// 1.6W*1/4  4000多.    安比例  7000 15  基本工资8000 
// 年底11W  行情  全球第一

// 取消了全球所有公司员工年终奖  15亿 





</script>